<template>
<div style="display: flex; justify-content: center; ; flex-grow: 1;">
    <div class="Container" :style="{flexDirection: flex_direction}">
      <Steps class="Steps" :current="currentIndex" :rtl="lang.rtl" direction="vertical">
        <Step :status="databaseStepsStatus" :title="lang.prepare_create_database" :content="lang.step_prepare_create_database" @click.native="currentIndex = 0"/>
        <Step :status="databaseStepsStatus" :title="lang.prepare_connect_to_database" :content="lang.step_prepare_database_configuration" @click.native="currentIndex = 1"/>
        <Step :title="lang.application" :content="lang.create_an_application" @click.native="currentIndex = 2"/>
        <Step :title="lang.account" :content="lang.create_an_super_user" @click.native="currentIndex = 3"/>
        <Step :title="lang.start" :content="lang.start_using" @click.native="currentIndex = 4"/>
      </Steps>
      <div class="Content" :class="{'rtl-layout': lang.rtl}">

        <swiper class="MySlider" :options="swiperOption" ref="MainSwiper">
          <swiper-slide><PrepareDataBaseCreate v-model="adminDbConfig"/></swiper-slide>
          <swiper-slide><PrepareDataBaseConfig v-model="dbConfig"/></swiper-slide>
          <swiper-slide><ApplicationInstanceComponent v-model="application"/></swiper-slide>
          <swiper-slide>Hello</swiper-slide>
          <swiper-slide><DataBaseCreate :databaseConfig="dbConfig" :superDataBaseConfig="adminDbConfig" :applicationInstance="application" @onGoPage="currentIndex = $event"/></swiper-slide>
          <!-- <swiper-slide>Hello1</swiper-slide>
          <swiper-slide>Hello2</swiper-slide>
          <swiper-slide>Hello3</swiper-slide>
          <swiper-slide>Hello4</swiper-slide>
          <swiper-slide>Hello5</swiper-slide> -->
        </swiper>
        <div>
          <Button :disabled="isLast" class="action" @click="next">{{ lang.next }}</Button>
          <Button :disabled="isFirst" class="action" @click="previous">{{ lang.previous }}</Button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import PrepareDataBaseConfig from "./PrepareDataBaseConfig";
import PrepareDataBaseCreate from "./PrepareDataBaseCreate";
import DataBaseCreate from "./DataBaseCreate";
import CountryComponent from "../../Country";
import ApplicationInstanceComponent from "./ApplicationInstance"
import { DataBaseConfig } from "../../../Entities/DataBaseConfig";
import { DataBaseCreationConfig } from "../../../Entities/DataBaseCreationConfig";
import {Country} from "../../../Entities/Country"

import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import { Application } from '../../../Entities/Application';

const componentsLength = 5;
const components = {
  PrepareDataBaseCreate,
  PrepareDataBaseConfig,
  DataBaseCreate,
  CountryComponent,
  swiper,
  swiperSlide,
  ApplicationInstanceComponent,
};

export default {
  components: components,
  data() {
    return {
      currentIndex: 0,
      dbConfig: new DataBaseConfig(),
      adminDbConfig: new DataBaseCreationConfig(),
      country: [],
      application: new Application(),
      swiperOption: {
        direction: "horizontal",
        // autoHeight: true,
        observer: true,
        // effect: "coverflow",
        speed: 500,
        on: {
          slideChange: () => {
            this.currentIndex = this.slider.swiper.activeIndex;
          }
        }
      }
    };
  },
  computed: {
    lang() {
      return this.$store.state.lang;
    },
    ...mapGetters("lang", ["flex_direction"]),
    isFirst() {
      return this.currentIndex == 0;
    },
    isLast() {
      return !(this.currentIndex < componentsLength - 1);
    },
    ...mapState("webServer", {
      webServerStatus: state => state.status
    }),
    databaseStepsStatus() {
      // return this.webServerStatus.databaseInitialized ? 'finish' : 'error'
    },
    slider() {
      return this.$refs.MainSwiper;
    }
  },
  watch: {
    currentIndex(newValue, oldValue) {
      // if (newValue > oldValue){
      this.slider.swiper.slideTo(newValue);
      // }
      // else {

      // }
    }
  },
  methods: {
    next() {
      if (!this.isLast) {
        this.currentIndex++;
      }
    },
    previous() {
      if (!this.isFirst) {
        this.currentIndex--;
      }
    },
  },
  created() {}
};
</script>


<style lang="scss" scoped>
@mixin bordered() {
  border: {
    color: #efefef;
    style: solid;
    width: 1px;
  }
}
.Container {
  // flex-grow: 1;
  margin: 20px;
  display: flex;
  // align-items: center;
  // justify-content: center;
  // background-color: rgb(255, 197, 197);

  @include bordered();
}
.Steps {
  overflow: auto;
  width: 300px;
  padding: {
    left: 15px;
  }
  @include bordered();
}
.Content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  // width: 900px;
  // overflow: auto;
}
.action {
  margin: {
    top: 20px;
    right: 10px;
    left: 10px;
  }
}
.MySlider {
  // height: 530px;
  width: 670px;
  // overflow-y: auto;
}
.swiper-slide {
  // width: auto;
  // width: 700px;
  // background-color: red;
  // position:unset;

}
</style>
